<template>
  <Modal id="answer-modal"
         v-model="visible"
         width="800px">
    <Form :model="answerList" ref="answerList">
    <div class="wrap">
      <div class="part part1">
        <div class="title">单选题</div>
        <ul class="desc">
          <li v-if="item.exerciseType==0"
              class="item-title"
              v-for="(item,index) in questionnaireInfo"
              :key="index">
            <div>{{index+1}}.{{item.exerciseName}}</div>
            <FormItem class="options">
              <RadioGroup v-model="answerList.answerSingal[index]" @on-change="radioChange()">
                <Radio :label="it.answerOption" v-for="(it,i) in item.exercisesAnswersList" :key="i">
                  <span>{{it.answerOption}}:{{it.answer}}</span>
                </Radio>
              </RadioGroup>
            </FormItem>
          </li>
        </ul>
      </div>
      <div class="part part2" v-if="0">
        <div class="title">多选题</div>
        <ul class="desc">
          <li v-if="item.exerciseType==1"
              class="item-title"
              v-for="(item,index) in questionnaireInfo"
              :key="index">
            <div>{{index+1}}.{{item.exerciseName}}</div>
            <ul class="options">
              <!--<li v-for="it in item.exercisesAnswersList">
                <span>{{it.answerOption}}</span>
                <span>:</span>
                <span>{{it.answer}}</span>
              </li>-->
              <CheckboxGroup v-model="answerList.answerMutiply[index]" @on-change="checkChange()">
                  <Checkbox :label="it.answerOption" v-for="(it,i) in item.exercisesAnswersList" :key="i">
                    <span>{{it.answerOption}}</span>
                    <span>:</span>
                    <span>{{it.answer}}</span>
                  </Checkbox>
              </CheckboxGroup>
            </ul>
          </li>
        </ul>
      </div>
      <div class="part part3">
        <div class="title">主观题</div>
        <ul class="desc">
          <li v-if="item.exerciseType==2"
              class="item-title"
              v-for="(item,index) in questionnaireInfo"
              :key="index">
            <div>{{index+1}}.{{item.exerciseName}}</div>
            <FormItem>
              <Input v-model="answerList.answerTextarea[index]" 
              type="textarea" 
              @on-blur="textareaChange()"
              placeholder="Enter something..." />
            </FormItem>
          </li>
        </ul>
      </div>
    </div>
    <FormItem>
        <Button type="primary" @click="handleSubmit('answerList')">Submit</Button>
        <Button style="margin-left: 8px" @click="handleReset('answerList')">Cancel</Button>
    </FormItem>
    </Form>
  </Modal>
</template>
<script>
import { queryQuestionnaireInfo } from '@/api/management'
export default {
  data () {
    return {
      visible: false,
      content: '',
      answerList: {
        answerSingal: ['','',''], //单选答案
        answerMutiply: [], //多选答案
        answerTextarea: [], //主观题答案
      },
      dataForm: {},
      visible: false,
      questionnaireName: '',
      questionnaireInfo: []
    }
  },
  methods: {
    init (questionnaireId) {
      this.visible = true
      this.$nextTick(() => {
        queryQuestionnaireInfo(questionnaireId).then(res => {
          console.log(res)
          this.questionnaireName = res.data.questionnaireName
          this.questionnaireInfo = res.data.questionnaireExercisesList
          console.log(this.questionnaireInfo)
        })
      })
    },
    radioChange(val){
      console.log(val)
      console.log(this.answerSingal)
    },
    checkChange(val){
      console.log(val)
      console.log(this.answerMutiply)
    },
    textareaChange(val){
      console.log(val)
      console.log(this.answerTextarea)
    },
    handleSubmit (name) {
      // this.$refs[name].validate((valid) => {
      //     if (valid) {
      //         this.$Message.success('Success!');
      //     } else {
      //         this.$Message.error('Fail!');
      //     }
      // })
      console.log(this.answerList)
    },
    handleReset (name) {
      this.$refs[name].resetFields();
    },
  },
  components: {

  }
}
</script>
<style lang="scss">
#answer-modal {
  .wrap {
    .title {
      font-size: 16px;
      font-weight: bold;
      padding: 10px 0;
    }
    .item-title{
      margin-bottom: 15px;
      &>div{
        font-size: 14px;
        font-weight: 500;
      }
    }
    .options{
      display: flex;
      li{
        flex: 1;
      }
    }
  }
}
</style>
